<template>
  <div class="shop" style="margin-top: -50px">
    <div class="topImg">
      <div><img src="@/assets/image/shop/mall.jpg" alt="" /></div>
      <img src="@/assets/image/shop/mall.jpg" alt="" />
    </div>
    <img class="img" src="@/assets/image/shop/one.jpg" alt="" />
    <img class="img" src="@/assets/image/shop/two.jpg" alt="" />
    <img class="img" src="@/assets/image/shop/three.jpg" alt="" />
    <img class="img" src="@/assets/image/shop/four.jpg" alt="" />
    <Loading v-show="onLoading"></Loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 怕版权影响换张图片
      imgUrl: require("@/assets/image/pagint.png"),
      flag: false,
      // 真实案例列表
      lifesafeguardlist: [],
      // 知识问答列表
      KnowledgeList: [],
      pageIndex: 1,
      btnState: 1,
      msgons: "",
      onLoading: false,
    };
  },
  created() {
    
  },
  methods: {

  },
};
</script>

<style scoped lang="less">
.shop {
  background-image: url("~@/assets/image/employment/backimg.png");
  background-color: #b81818;
  background-size: 100% auto;
  min-height: calc(100vh - 284px);
  .topImg {
    max-width: 100% !important;
    // min-height:800px;
    max-height: 693px;
    overflow: hidden;
    div {
      width: 100%;
      max-height: 693px;
      z-index: 0;
      position: absolute;
      filter: blur(10px);
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    img {
      display: block;
      margin: 0 auto;
      max-width: 100%;
      max-height: 800px;
      z-index: 1;
      position: relative;
    }
  }
  .img{
    display: block;
    margin: 0 auto;
  }
}
</style>
